<!DOCTYPE HTML>
<html>

<head>
   <title> 账号管理</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>
               账号管理
               <button id="add-account-btn" class="jx-btn btn-default pull-right">新增账号</button>
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <div id="grid"></div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
         </div>
      </div>
   </div>
   </div>
   <!-- 初始隐藏 assignDialog内容 -->
   <div id="assign" class="hide">
      <form class="form-horizontal jx-form">
         <div class="row">
            <div class="control-group">
               <label for="" class="control-label">角色: </label>
               <div class="controls">
                  <select class="">
                      <option value="">管理员</option>
                 </select>
               </div>
            </div>
         </div>
      </form>
   </div>
   <!-- 初始隐藏 editDialog内容 -->
   <div id="edit" class="hide">
      <form class="form-horizontal jx-form">
         <div class="row">
            <div class="control-group">
               <label for="" class="control-label">登录账号: </label>
               <div class="controls">
                  admin_boss
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group">
               <label for="" class="control-label">姓名: </label>
               <div class="controls">
                  <input type="text" class="input-large" placeholder="请输入账号名">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group ">
               <label class="control-label">
                          状态：</label>
               <div class="controls" style="margin-top:3px">
                  <label>   <input id="" name="status" checked type="radio" value="1">正常</label>
                  <label>    <input id="" name="status" type="radio" value="2">冻结</label>
               </div>

            </div>
         </div>
      </form>
   </div>
   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      /* 在服务器端可以使用*/
      $('#user-add-btn').click(function (e) {

         top.topManager.openPage({
            id: 'user-add',
            href: 'templates/user/user-list/user-add.html',
            title: '添加品牌'
         });

      });

      BUI.use(['bui/grid', 'bui/data', 'bui/tab', 'bui/overlay', 'bui/form', 'common/search'], function (Grid, Data,
         Tab, Overlay, Form, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
               title: '序号',
               dataIndex: 'o',
               elCls: 'center', //居中
               width: 100
            }, {
               title: '姓名',
               dataIndex: 'a',
               elCls: 'center', //居中
               width: 100
            }, {
               title: '登录账号',
               elCls: 'center',
               dataIndex: 'b',
               width: 100
            }, {
               title: '角色',
               elCls: 'center',
               dataIndex: 'c',
               width: 100
            }, {
               title: '状态',
               elCls: 'center',
               dataIndex: 'd',
               width: 100
            }, {
               title: '操作',
               dataIndex: 'h',
               elCls: 'center',
               width: 200,
               renderer: function (value, obj) {
                  return '<span class="grid-command btn-assign">[ 分配 ]</span>' +
                     '<span class="grid-command btn-edit">[ 修改 ]</span>' +
                     '<span class="grid-command btn-reset">[ 重置 ]</span>' +
                     '<span class="grid-command btn-del">[ 删除 ]</span>'; //页面操作不需要使用Search.createLink
               }
            }],
            data = [{
               o: '1222',
               a: '杜云明',
               b: 'admin_auth',
               c: '超级管理员',
               d: '正常',

            }];
         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               forceFit: true,
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               store: store
            });
         grid.render();
         //分配角色
         var assignDialog = new Overlay.Dialog({
            title: '分配角色',
            width: 380,
            //配置DOM容器的编号
            contentId: 'assign',
            success: function () {
               //点击成功时候操作
               BUI.Message.Alert('设置成功');
               this.close();
            }
         });
         //修改账户
         var editDialog = new Overlay.Dialog({
            title: '修改账号',
            width: 380,
            //配置DOM容器的编号
            contentId: 'edit',
            success: function () {
               //点击成功时候操作
               BUI.Message.Alert('设置成功');
               this.close();
            }
         });

         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;
            if (sender.hasClass('btn-assign')) { //点击分配操作
               AssignFunction(item, itemEl);
            } else if (sender.hasClass('btn-del')) { //点击刪除操作
               delFunction(item, itemEl);
            } else if (sender.hasClass('btn-reset')) { //点击重置
               ResetFunction(item, itemEl);
            } else if (sender.hasClass('btn-edit')) { //点击需改
               EditFunction(item, itemEl);
            }
         });
         //重置
         function ResetFunction() {
            BUI.Message.Confirm('确认要重置密码为‘123456’吗？', function () {

            }, 'question');
         }

         //分配
         function AssignFunction() {
            assignDialog.show();
         }

         //修改
         function EditFunction() {
            editDialog.show();
         }

         //没有多选插件，删除选中的记录
         function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除该账号吗', function () {
               var input = itemEl.find('input'),
                  name = itemEl.attr('name');
               if (name) {
                  form.getField(name).remove();
               }

               store.remove(item);
            }, 'question');
         }

      });
   </script>
   <!-- script end -->

   <body>

</html>